<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
  <div id="app">
    <div style="display: flex; align-items: center;">
      <el-upload style="margin-right: 10px;" class="upload-demo" drag action="" multiple :show-file-list="false" :http-request="uploadFile">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <div>
        <el-button size="small" type="primary" @click="getFiles">重新获取文件列表</el-button>
        <el-button size="small" type="danger" @click="delOldFiles">清理缓存(最近三天)</el-button>
      </div>
    </div>
    
    <!-- 进度条 -->
    <el-progress :percentage="percentage"></el-progress>
    <!-- 文件列表 -->
    <el-table :data="fileList" max-height="680">
      <el-table-column prop="name" label="文件名"></el-table-column>
      <el-table-column prop="size" label="文件大小"></el-table-column>
      <el-table-column prop="ctime" label="创建日期"></el-table-column>
      <el-table-column prop="options" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="download(scope.row)">下载</el-button>
          <el-button type="text" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- Axios -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.min.js"></script>
<!-- moment -->
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.30.1/locale/af.min.js"></script>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        $http: null,
        fileList: [],
        percentage: 0, 
        interval: null,
      };
    },
    created() {
      this.initAxios();
      this.getFiles();
    },
    methods: {
      initAxios() {
        this.$http = axios.create()
      },
      // 上传文件，/upload接口
      uploadFile(file) {
        const formData = new FormData();
        formData.append('file', file.file);
        // 发送请求
        this.mockProcess()
        this.$http.post('/upload', formData).then(res => {
          clearInterval(this.interval)
          this.interval = null
          this.percentage = 100
          this.$message.success("上传成功")
          this.getFiles()
        })
      },
      // 获取文件列表
      getFiles() {
        this.$http.get('/files').then(res => {
          console.log(res);
          this.fileList = res.data
        })
      },
      download(row) {
        const url = '/download?name=' + row.name;
        window.location.href = encodeURI(url) // 处理中文参数 
      },
      del(row) {
        var result = window.confirm(`确定要删除${row.name}吗？`)
        if (result) {
          this.$http.get('/del?name=' + row.name).then(res => {
            this.$message.success("删除成功")
            this.getFiles()
          })
        }
      },
      delOldFiles() {
        this.$http.get('/delOldFiles?day=3').then(res => {
          this.$message.success("缓存清理成功")
          this.getFiles()
        })
      },
      mockProcess() {
        this.percentage = 0
        this.interval = setInterval(() => {
          this.percentage += 10
          if (this.percentage >= 90) {
            clearInterval(this.interval)
            this.interval = null
          }
        }, 100)
      }
    },
  })
</script>

</html>